<template>
  <el-dialog v-model="visible" :title="title" width="1200" height="500" @close="close" :close-on-click-modal="false"
    :close-on-press-escape="false">
      <el-form ref="formRef" :rules="rules" :model="form" label-align="right" label-width="120" size="default">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="备库订单号">{{ form.backup_warehouse_order_no }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配货单号">{{ form.head_goods_order_no }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="shipmentID/第三方单号">{{ form.shipment_id }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建单员">{{ form.create_user }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发货仓库">{{ form.out_warehouse_name }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="国家">{{ form.country_code }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目的仓">{{ form.in_warehouse_name }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货备注">{{ form.remark }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="w-full">
        <el-tabs v-model="activeName" class="pl-4 pr-4" @tab-change="handleChange">
          <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabList" :key="index"></el-tab-pane>
        </el-tabs>
      </div>
      <template v-if="activeName == 0">
        <el-table ref="singleTableRef" :data="form.detail" highlight-current-row :header-cell-style="{
          color: '#333333', background: '#F6FAFF'
        }" style="width: 100%" height="550">
          <el-table-column type="index" width="50" />
          <el-table-column prop="custom_sku" label="自定义SKU" width="120" />
          <el-table-column prop="sku" label="SKU" width="120" />
          <el-table-column prop="to_fn_sku" label="FNSKU/第三方SKU" width="120">
            <template #default="{ row }">
              {{ row.to_fn_sku }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="产品名称" width="120">
            <template #default="{ row }">
              <el-tooltip class="item" effect="dark" :content="row.spu_cn_title" placement="top">
                <div class="overflow-line2 text-[#333333]">中文名称：{{ row.spu_cn_title }}</div>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="row.spu_en_title" placement="top">
                <div class="overflow-line2 text-[#333333]">英文名称：{{ row.spu_en_title }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="基础信息" width="120">
            <template #default="{ row }">
              <div>重量：{{ row.to_fn_sku }}</div>
              <div>长宽高：{{ row.length }} * {{ row.width }} * {{ row.height }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="产品图片">
            <template #default="{ row }">
            </template>
          </el-table-column>
          <el-table-column prop="" label="货主" width="120" />
          <el-table-column prop="location_id" label="货位" width="120" />
          <el-table-column prop="apply_num" label="申请数量" width="120" />
          <el-table-column prop="pick_num" label="拣货数量" width="120" />
          <el-table-column prop="install_box_num" label="装箱数量" width="120" />
          <el-table-column props="remark" label="备注" width="120" />
          <el-table-column prop="address" label="打印" width="350">
            <template #default="{ row }">
              <div class="mb-1">
                <el-input size="mini" v-model="row.print_code_number" style="width: 80px;"></el-input>
                <el-button size="mini" type="primary">打印条码</el-button>
                <el-button size="mini" type="primary">下载</el-button>
                {{ row.is_print_code }}
              </div>
              <div class="mb-1">
                <el-input size="mini" v-model="row.print_transparent_number" style="width: 80px;"></el-input>
                <el-button size="mini" type="primary">打印透明计划</el-button>
                <el-button size="mini" type="primary">下载</el-button>
                {{ row.is_print_transparent }}
              </div>
              <div>
                <el-button type="primary" @click="handlePrint">标签打印</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <el-table ref="singleTableRef" :data="form.box_detail" highlight-current-row :header-cell-style="{
          color: '#333333', background: '#F6FAFF'
        }" style="width: 100%" height="550">
          <el-table-column type="index" width="50" />
          <el-table-column prop="head_box_order_no" label="箱号" />
          <el-table-column prop="width" label="重量" />
          <el-table-column prop="custom_sku" label="长宽高">
            <template #default="{ row }">{{ row.length }} * {{ row.width }} * {{ row.height }}</template>
          </el-table-column>
          <el-table-column prop="create_user" label="装箱人" />
          <el-table-column prop="create_time" label="装箱时间" />
          <el-table-column prop="operan" label="操作">
            <template #default="{ row }"><el-button type="primary" link
                @click="viewBox('view', row.id)">查看</el-button></template>
          </el-table-column>
        </el-table>
      </template>
  </el-dialog>
  <boxDetail ref="boxDetailRef"></boxDetail>
  <LlabelPrinting ref="LlabelPrintingRef"></LlabelPrinting>

</template>
<script setup name="ComModal">
import { getHeadOrderDetail, queryHeadList } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import boxDetail from './boxDetail.vue'
import LlabelPrinting from '@/components/LlabelPrinting'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const data = reactive({
  form: {},
  title: '新增',
  handleType: null,
  rules: {

  },
})
const { form, title, handleType, rules } = toRefs(data)

const statusMap = new Map([
  ['view', '配货单'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}


const getDetail = async (id) => {
  try {
    const res = await getHeadOrderDetail({
      id
    })
    form.value = res.data

  } catch (e) {
    throw Error(e)
  }
}


const activeName = ref(0)
const tabList = [
  {
    label: '头程配货单明细',
    name: 0
  },
  {
    label: '装箱信息',
    name: 1
  },
]

const handleChange = async (val) => {
  if (val == 1) {
    try {
      const res = await queryHeadList({
        head_goods_order_no: form.value.head_goods_order_no
      })
      form.value.box_detail = res.data
    } catch (e) {
      throw Error(e)
    }
  }
}

const boxDetailRef = ref()
const viewBox = (type, id) => {
  boxDetailRef.value.open(type, id)
}

// 打印
const LlabelPrintingRef = ref()
const handlePrint = async (id) => {
  LlabelPrintingRef.value.open()
}

const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}

.drawerClass {
  :deep(.el-drawer__body) {
    padding: 0 10px;
  }

  :deep(.el-drawer__header) {
    margin-top: 0;
  }
}
</style>
<style lang="scss">
// .drawerClass{

// }
</style>
